<%--
  Created by IntelliJ IDEA.
  User: Gao
  Date: 2025/2/14
  Time: 9:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
    <form class="layui-form">
        博客名：
        <div class="layui-inline">
            <input type="text" name="name" class="layui-input" lay-affix="clear">
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="submitSearch">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>

    <table class="layui-hide" id="tableId" lay-filter="tableId"></table>

    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteById">删除</a>
            <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="content">详情</a>
        </div>
    </script>

    <button lay-options="{accept: 'file'}" id="importExcel"></button>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="exportExcel">导出Excel</button>
            <button class="layui-btn layui-btn-sm" lay-event="importExcel">导入Excel</button>
        </div>
    </script>

    <script type="text/html" id="imageTemplet">
        <img src="/pic/{{d.image}}"></img>
    </script>

    <script type="text/html" id="statusTemplet">
        {{#     if (d.status == 1) {            }}
                    <span class="layui-badge layui-bg-green">上架</span>
        {{#     } else if (d.status == 0) {     }}
                    <span class="layui-badge">下架</span>
        {{#     }                               }}
    </script>

    <script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table','layer', 'form', 'upload'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var upload = layui.upload;

            // 渲染
            upload.render({
                elem: '#importExcel', // 绑定多个元素
                url: '/blog?method=importExcel', // 此处配置你自己的上传接口即可
                accept: 'file', // 普通文件
                done: function(res){
                    layer.msg('上传成功');
                    console.log(res);
                }
            });

            table.render({
                elem: '#tableId',
                url:'/blog?method=selectByPage',
                toolbar: '#toolbarDemo',
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field:'id', title: 'ID', sort: true},
                    {field:'name', title: '博客名'},
                    {field:'image', title: '封面', templet:'#imageTemplet'},
                    {field:'content', title: '博客内容', escape: false},
                    {field:'clickCount', title: '点击数量'},
                    {field:'typeName', title: '分类'},
                    {field:'status', title: '状态', templet:'#statusTemplet'},
                    {field:'createTime', title: '创建时间'},
                    {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
                ]],
                page: true
            });

            // 搜索提交
            form.on('submit(submitSearch)', function(data){
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                //http://localhost:8081/blog?method=selectByPage&page=1&limit=10&name=Java&credit=3
                table.reload('tableId', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });

                return false; // 阻止默认 form 跳转
            });

            // 触发单元格工具事件
            table.on('tool(tableId)', function(obj){ // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                // {id:12,name:'Java',credit:3}
                console.log(data);
                // console.log(obj)
                if(obj.event === 'update'){
                    layer.open({
                        type: 2,
                        title: '编辑数据',
                        area: ['90%', '90%'],
                        content: '/page/blog/update?id=' + data.id
                    });
                } else if(obj.event === 'deleteById'){
                    layer.confirm('您确认要删除么?', function () {
                        $.post(
                            '/blog?method=deleteById',
                            {'id': data.id},
                            function (result) {
                                console.log(result);
                                if (result.code == 0) {
                                    mylayer.okMsg(result.msg);
                                    //删除数据之后刷新表格，展示最新数据
                                    table.reload('tableId');
                                } else {
                                    mylayer.errorMsg(result.msg);
                                }
                            },
                            'json'
                        );
                    });
                } else if (obj.event == 'content') {
                    layer.open({
                        type: 1,
                        title: data.name,
                        area: ['90%', '90%'],
                        content: data.content
                    });
                }
            });

            // 头部工具栏事件
            table.on('toolbar(tableId)', function(obj){
                var options = obj.config; // 获取当前表格属性配置项
                var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
                console.log(obj); // 查看对象所有成员


                // 根据不同的事件名进行相应的操作
                switch(obj.event){ // 对应模板元素中的 lay-event 属性值
                    case 'exportExcel':
                        location.href = '/blog?method=exportExcel';
                        break;
                    case "importExcel":
                        $('#importExcel').click();
                        break
                    case 'add':
                        layer.open({
                            type: 2,
                            title: '添加数据',
                            area: ['90%', '90%'],
                            content: '/page/blog/add'
                        });
                        break;
                    case 'deleteAll':
                        var data = checkStatus.data;
                        //[{id: 1, name: 'Java', credit: 5}, {…}]
                        var ids = new Array();
                        $(data).each(function () {
                            ids.push(this.id);
                        })
                        //[2,3]
                        layer.confirm('您确认要删除么?', function () {
                            $.post(
                                '/blog?method=deleteAll',
                                {'ids': ids},
                                function (result) {
                                    console.log(result);
                                    if (result.code == 0) {
                                        mylayer.okMsg(result.msg);
                                        //删除数据之后刷新表格，展示最新数据
                                        table.reload('tableId');
                                    } else {
                                        mylayer.errorMsg(result.msg);
                                    }
                                },
                                'json'
                            );
                        });
                        break;
                };
            });

        });
    </script>
</body>
</html>
